<template>
    <div class="contact-page">
        <!-- 联系我们顶部横幅 -->
        <div class="contact-banner">
            <div class="banner-content">
                <h1 class="banner-title">联系我们</h1>
                <p class="banner-subtitle">CONTACT US</p>
            </div>
        </div>

        <!-- 面包屑导航 -->
        <div class="breadcrumb-container">
            <div class="container">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>联系我们</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>

        <div class="container">
            <div class="contact-content">
                <!-- 公司信息 -->
                <div class="company-info">
                    <h2 class="company-name">{{ companyInfo.name }}</h2>
                    <p class="company-name-en">{{ companyInfo.nameEn }}</p>

                    <div class="info-list">
                        <div class="info-item">
                            <i class="el-icon-location"></i>
                            <span>{{ companyInfo.address }}</span>
                        </div>
                        <div class="info-item">
                            <i class="el-icon-phone"></i>
                            <span>{{ companyInfo.phone }}</span>
                        </div>
                      <div class="info-item">
                        <i class="el-icon-phone"></i>
                        <span>{{ companyInfo.phone2 }}</span>
                      </div>
                        <div class="info-item">
                            <i class="el-icon-message"></i>
                            <span>{{ companyInfo.email }}</span>
                        </div>
                        <div class="info-item">
                            <i class="el-icon-link"></i>
                            <span>{{ companyInfo.website }}</span>
                        </div>
                    </div>
                </div>

                <!-- 联系表单 -->
                <div class="contact-form">
                    <div class="form-row">
                        <div class="form-item">
                            <input type="text" v-model="form.name" placeholder="姓名" />
                        </div>
                        <div class="form-item">
                            <input type="text" v-model="form.phone" placeholder="电话" />
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-item full-width">
                            <input type="text" v-model="form.email" placeholder="邮箱地址" />
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-item full-width">
                            <textarea v-model="form.message" placeholder="留言"></textarea>
                        </div>
                    </div>
                    <div class="form-row">
                        <button class="submit-btn" @click="submitForm">提 交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {contactUs} from "~/api/news";

// 公司信息
const companyInfo = reactive({
    name: '杭州齐远医药科技有限公司',
    nameEn: 'Hangzhou Qiyuan Pharmaceutical Technology Co., Ltd.',
    address: '',
    phone: '国内业务总经理：翁总18267170558 微信同号',
    phone2: '国际业务经理：华总15107182507 微信同号',
    email: '联系邮箱：contact@hzqypharm.com'
})

// 表单数据
const form = reactive({
    name: '',
    phone: '',
    email: '',
    message: ''
})
// 提交表单
const submitForm = async () => {
  if (!form.name || !form.phone || !form.message) {
    ElMessage.warning('请填写必要的信息')
    return
  }
  await contactUs({
    name:form.name,
    phone:form.phone,
    email:form.email,
    message:form.message
  })
  // 这里可以添加表单提交的逻辑
  ElMessage.success('提交成功，我们会尽快与您联系')

  // 重置表单
  form.name = ''
  form.phone = ''
  form.email = ''
  form.message = ''
}
</script>

<style lang="scss" scoped>
.contact-page {
    width: 100%;
}

.contact-banner {
    height: 240px;
    background-image: url('@/assets/images/contact-banner.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    position: relative;
    
    .banner-content {
        position: relative;
        z-index: 1;
        padding-left: 10%;
    }
    
    .banner-title {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 8px;
    }
    
    .banner-subtitle {
        font-size: 18px;
        opacity: 0.8;
    }
}

.breadcrumb-container {
    background-color: #f5f5f5;
    padding: 12px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.contact-content {
    display: flex;
    flex-wrap: wrap;
    padding: 50px 0;
    gap: 40px;
}

.company-info {
    flex: 1;
    min-width: 300px;
    
    .company-name {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 8px;
    }
    
    .company-name-en {
        color: #666;
        margin-bottom: 30px;
    }
    
    .info-list {
        margin-top: 20px;
    }
    
    .info-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
        color: #333;
        
        i {
            margin-right: 10px;
            color: var(--el-color-primary);
        }
    }
}

.contact-form {
    flex: 1;
    min-width: 300px;
    
    .form-row {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .form-item {
        flex: 1;
        
        &.full-width {
            width: 100%;
        }
        
        input, textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            
            &:focus {
                border-color: var(--el-color-primary);
                outline: none;
            }
        }
        
        textarea {
            height: 150px;
            resize: none;
        }
    }
    
    .submit-btn {
        background-color: #e60012;
        color: white;
        border: none;
        padding: 12px 30px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 4px;
        
        &:hover {
            background-color: darken(#e60012, 10%);
        }
    }
}

@media (max-width: 768px) {
    .contact-content {
        flex-direction: column;
    }
}
</style>